/*
* @Description: 3D测肤
* @Author: kanglin
* @Date: 2018-09-05 13:56:00
* @Copyright: Created by Panxsoft.
*/
<style lang="less" scoped rel="stylesheet/less" type="text/less">
  @import "~src/assets/css/common.less";

  .image-report {
    // background:linear-gradient(90deg,rgba(208,171,250,1) 0%,rgba(224,153,236,1) 100%);
    padding-bottom: 18 *@rem-per-px;

    .charts-panel {
      padding: 0 20 *@rem-per-px;
    }

    .today-panel__list {
      padding: 24*@rem-per-px 0;
    }

    .today-panel__list__item {
      padding: 24*@rem-per-px 0;
    }

    .today-panel,
    .history-panel {
      // padding: 18*@rem-per-px 0;
    }

    .analytics-panel {
      background: #ffffff;
      // padding-top: 28*@rem-per-px;
      margin-top: 40*@rem-per-px;
      margin-left: 20*@rem-per-px;
      margin-right: 20*@rem-per-px;
      position: relative;
    }

    .analytics-panel__header {
      background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/2.3.9/baogao_bgxia_img@2x.png ');
      background-size: 100%;
      background-repeat: no-repeat;
      height: 40* @rem-per-px;
      width: 100%;
      position: absolute;
      top: -40*@rem-per-px;
    }

    .analytics-panel__title {
      // margin-top: 68*@rem-per-px;
      text-align: center;
      height: 50*@rem-per-px;
      font-size: 36*@rem-per-px;
      font-weight: bold;
      line-height: 48*@rem-per-px;
      color: rgba(65, 72, 83, 1);
      margin: 0 auto;
      padding-top: 28*@rem-per-px;
    }

    .analytics-panel__attr {
      padding: 22*@rem-per-px 0  10*@rem-per-px;
    }

    .analytics-panel__detail {
      padding-left: 40*@rem-per-px;
      padding-right: 40*@rem-per-px;
      padding-top: 28 *@rem-per-px;

      .analytics-panel__detail__item {
        padding-bottom: 56 *@rem-per-px;
      }

      .detail__item__label {
        color: #414853;
        font-size: 22*@rem-per-px;
        line-height: 29*@rem-per-px;
        font-weight: bold;
      }

      .detail__item__desc {
        margin-top: 14*@rem-per-px;
        font-size: 18*@rem-per-px;
        text-align: justify;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 28*@rem-per-px;
      }

      .detail__item__progress-bar {
        // margin: 20*@rem-per-px 0;
        height: 106*@rem-per-px;
      }

    }

    .analytics-panel__comparison {
      position: relative;
      // height: 230;
      padding-top: 12 *@rem-per-px;
      padding-bottom: 8 *@rem-per-px;
      margin-top: 22*@rem-per-px;
      margin-bottom: 54*@rem-per-px;
      margin-left: 40 *@rem-per-px;
      margin-right: 40 *@rem-per-px;
    }

    .analytics-panel__comparison__button-left,
    .analytics-panel__comparison__button-right {
      width: 52*@rem-per-px;
      height: 52*@rem-per-px;
      background-color: transparent;
      background-size: 100%;
      border: 0;
      top: 50%;
      margin-top: -26*@rem-per-px;
      position: absolute;

      &:focus {
        outline: none;
      }
    }

    .analytics-panel__comparison__button-right {
      right: 0;
      background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/2.3.9/baogao_rightarrow_icon@2x.png');
    }

    .analytics-panel__comparison__button-left {
      background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/2.3.9/baogao_leftarrow_icon@2x.png');
      left: 0;
    }

    .analytics-panel__comparison__content {
      white-space: nowrap;
      text-align: center;
      vertical-align: top;
    }

    .analytics-panel__comparison__content-right,
    .analytics-panel__comparison__content-left {
      display: inline-block;
      font-size: 0;
      width: 160*@rem-per-px;
      height: 160*@rem-per-px;
      margin: 0 30*@rem-per-px;
    }

    .analytics-panel__comparison__content-left__thumb,
    .analytics-panel__comparison__content-right__thumb {
      overflow: hidden;
      border-radius: 50%;
      width: 100%;
      height: 100%;

      & > img {
        // width: 100%;
        height: 100%;
      }
    }

    .analytics-panel__comparison__content-left__text,
    .analytics-panel__comparison__content-right__text {
      text-align: center;
      font-size: 20*@rem-per-px;
      font-weight: 400;
      line-height: 29*@rem-per-px;
      color: rgba(51, 51, 51, 1);
      padding-top: 22 *@rem-per-px;
    }

    .generation {
      text-align: center;
      padding: 20*@rem-per-px 0 80*@rem-per-px;
    }
  }

</style>
<template>

  <div class="image-report">

    <div>
      <image-problem
        :problems="image_problem_data"
        :sex="getSex" />
    </div>

    <!-- BEGIN: charts-panel -->
    <div class="charts-panel">
      <data-panel
        :default-mode="defaultDateMode"
        @change="handleSwitchChange">
        <div
          slot="today"
          class="today-panel">
          <div
            v-if="hasDataToday"
            class="today-panel__chart">
            <radar-chart :data="attributes_analytics_data" />
          </div>
          <default-empty
            v-else
            :height="default_com_height"
            :tips="$t('report.empty_tips_today')" />
        </div>

        <div
          slot="history"
          class="history-panel">
          <template v-if="hasHistory">
            <data-nav
              ref="data-nav"
              :items="nav_items_conf"
              :index="current_skin_attr_index"
              @selected="handleNavChange" />

            <image-line-chart
              v-if="hasAttributeRecords"
              ref="line_chart"
              :chart-data="skin_attr_records"
              @show="handleSelectDate" />
            <default-empty
              v-else
              :height="default_com_height-navigation_height"
              :tips="$t('report.empty_tips_history')" />

          </template>
          <default-empty
            v-else
            :height="default_com_height"
            :tips="$t('report.empty_tips_history')" />
        </div>

      </data-panel>
    </div>
    <!-- END: charts-panel -->

    <!-- BEGIN: analysis-panel -->
    <div
      v-if="hasAttributeRecords && current_skin_attr_analytics"
      class="analytics-panel">
      <div class="analytics-panel__header" />
      <h2 class="analytics-panel__title">
        {{ current_skin_attr_analytics.itemsname | upperCase }}
      </h2>
      <!-- {{ $t('report.care_analysis') }} -->
      <div class="analytics-panel__comparison">
        <button
          class="analytics-panel__comparison__button-left"
          @click="setNavigationIndex(-1)" />
        <div class="analytics-panel__comparison__content">
          <div class="analytics-panel__comparison__content-left">
            <div class="analytics-panel__comparison__content-left__thumb">
              <img
                :src="current_skin_attr_analytics.origin_img"
                alt="">
            </div>
            <p class="analytics-panel__comparison__content-left__text">{{ $t('report.origin_img') }}</p>
          </div>

          <div class="analytics-panel__comparison__content-right">
            <div class="analytics-panel__comparison__content-right__thumb">
              <img
                :src="current_skin_attr_analytics.analyse_img"
                alt="">
            </div>
            <p class="analytics-panel__comparison__content-right__text">{{ $t('report.analyse_img') }}</p>
          </div>

        </div>
        <button
          class="analytics-panel__comparison__button-right"
          @click="setNavigationIndex(1)" />
      </div>

      <!-- BEGIN: 分析详情 -->
      <ul class="analytics-panel__detail">
        <li
          class="analytics-panel__detail__item">

          <div class="detail__item__progress-bar">
            <progress-bar
              :gradient-color="calculateColorValue(current_skin_attr_analytics.value)"
              :value="Number(current_skin_attr_analytics.value) || 0"
              :label="current_skin_attr_analytics.levelname"
              :coordinates="analytics_com_conf[current_skin_attr_index].progress_coordinates"
              :unit="$t('report.score')"
              wrapper_color="#F0EFEF" />
          </div>
          <p class="detail__item__desc">
            {{ current_skin_attr_analytics.cause }}
          </p>

        </li>
      </ul>
      <!-- ENG: 分析详情 -->

      <div class="generation">
        <m-button
          :loading.sync="is_loading"
          @click.native="generateSolution(attributes_analytics_data ,current_skin_attr_analytics)">
          <span v-if="is_loading">{{ $t('report.generating') }}</span>
          <span v-else>{{ $t('report.generate_plan') }}</span>
        </m-button>
      </div>

    </div>
    <!-- END: analysis-panel -->

  </div>

</template>

<script>
  import {getComputedStyle} from 'src/utils/utils' // 公有方法

  import skinDataChart from 'src/views/component/skinDataChart'
  import touchProblem from 'src/views/component/skin-problem/touchProblem'
  import analysisData from 'src/views/component/analysis-data'
  import progressBar from 'src/views/component/progressbar'
  import imageProblem from 'src/views/component/skin-problem/imageProblem'
  import MButton from 'src/views/component/m-button'
  import {parseQueryString} from 'src/utils/helper'
  import {$t, isEnglish} from 'src/locales/index'
  import defaultEmpty from './default-empty'
  import dataPanel from './data-panel'
  import dataNav from './data-nav'
  import MSlick from './m-slick'
  import imageLineChart from './imageLineChart' // 折线图
  import radarChart from './radar-chart'
  import { toDate } from 'src/utils/utils';

  const SKIN_ATTR_MAP = {
    SENSITIVITY: 1, // 皮肤敏感
    MOISTURE: 2, // 水
    OIL: 3, // 油
    CLEANLINESS: 4, // 毛孔清洁度
    PIGMENT: 5, // 色素
  }

  const image_problem_conf = {
    forehead: {title: $t('report.forehead'), contents: [$t('report.none')]},
    cheek: {title: $t('report.cheek'), contents: [$t('report.none')]},
    nose: {title: $t('report.nose'), contents: [$t('report.none')]},
  }

  const GRADIENT_COLOR = { // 补充
    bad: [{color: '#FC647F', frac: 1}, {color: '#FC647F', frac: 0}], // 差
    normal: [{color: '#64BAFC', frac: 1}, {color: '#64BAFC', frac: 0}], // 较好
    good: [{color: '#57EC84', frac: 1}, {color: '#57EC84', frac: 0}], // 好
  }


  export default {
    name: 'TouchReport',
    components: {
      'data-panel': dataPanel,
      'skin-data-chart': skinDataChart,
      'touch-problem': touchProblem,
      'analysis-data': analysisData,
      'm-slick': MSlick,
      'progress-bar': progressBar,
      'm-button': MButton,
      'default-empty': defaultEmpty,
      'data-nav': dataNav,
      'image-line-chart': imageLineChart,
      'radar-chart': radarChart,
      'image-problem': imageProblem,
    },
    filters: {
      upperCase(value) {
        const isString = Object.prototype.toString.call(value) === '[object String]'
        if (isEnglish && isString) {
          return value.substring(0, 1).toUpperCase() + value.substring(1)
        }
        return value
      },
    },
    props: {
      records: {
        type: Array,
        default() {
          return []
        },
      },
      generate: {
        type: Function,
        required: true,
      },
      sex: {
        type: Number,
        default() {
          return 2
        },
      },
    },
    data() {
      return {

        nav_items_conf: [// 呢D都系你写嘅？
          {
            name: this.$t('report.oil_test'), // 油脂
            thumb: require('src/assets/media/img/user/records/image/icon_Moisture.png'),
            key: SKIN_ATTR_MAP.OIL,
          },
          {
            name: this.$t('report.moisture_test'), // 水分
            thumb: require('src/assets/media/img/user/records/image/icon_grease.png'),
            key: SKIN_ATTR_MAP.MOISTURE,
          },
          {
            name: this.$t('report.sensitivity'), // 敏感度
            thumb: require('src/assets/media/img/user/records/image/icon_sensitive skin.png'),
            key: SKIN_ATTR_MAP.SENSITIVITY,
          },
          {
            name: this.$t('report.pigment'), // 色素分解度
            thumb: require('src/assets/media/img/user/records/image/icon_pigment.png'),
            key: SKIN_ATTR_MAP.PIGMENT,
          },
          {
            name: this.$t('report.cleanliness'), // 毛孔清洁度
            thumb: require('src/assets/media/img/user/records/image/icon_Pore cleaning.png'),
            key: SKIN_ATTR_MAP.CLEANLINESS,
          },
        ],

        current_skin_attr_analytics: {}, // 当前分析内容: 某天某测肤部位的测肤数据: 所有记录->  某部位的记录 -> 某天的分析数据

        skin_attr_records: [], // 某皮肤属性的测肤记录  所有记录-> 某属性的数据

        analytics_com_conf: [ // 分析组件配置
          {
            title: this.$t('report.image.oil_status'), // '油脂分泌',
            progress_coordinates: [0, 50, 60, 70, 100],
            gradient_color: [{color: '#FC647F', frac: 1}, {color: '#FC647F', frac: 0}],
          },
          {
            title: this.$t('report.image.hydrate_status'), // '含水状态',
            progress_coordinates: [0, 50, 60, 70, 100],
            gradient_color: [{color: '#FC647F', frac: 1}, {color: '#FC647F', frac: 0}],
          },
          {
            title: this.$t('report.image.red_blood_silk_status'), // '红血丝状态',
            progress_coordinates: [0, 50, 60, 70, 100],
            gradient_color: [{color: '#FC647F', frac: 1}, {color: '#FC647F', frac: 0}],
          },
          {
            title: this.$t('report.image.pigmentation_status'), // ''皮下色素状态',
            progress_coordinates: [0, 50, 60, 70, 100],
            gradient_color: [{color: '#FC647F', frac: 1}, {color: '#FC647F', frac: 0}],
          },
          {
            title: this.$t('report.image.elastic_status'), // '弹性纤维状态',
            progress_coordinates: [0, 50, 60, 70, 100],
            gradient_color: [{color: '#FC647F', frac: 1}, {color: '#FC647F', frac: 0}],
          },
          {
            title: this.$t('report.image.blackhead_status'), // '黑头粉刺状态',
            progress_coordinates: [0, 50, 60, 70, 100],
            gradient_color: [{color: '#FC647F', frac: 1}, {color: '#FC647F', frac: 0}],
          },
        ], // 用于生成滑条的配置

        is_loading: false,

        current_skin_attr_index: 0,

        is_today: true,

        image_problem_data: image_problem_conf,

        attributes_analytics_data: [], // 各部位检查数据 测肤数据: 1=>眼尾EYE_TAIL, 2=> 脸CHEEK, 3=>颈部NECK, 4=> 手ARM, 顺序

        today: [],

        default_com_height: 0,

        navigation_height: 0,

        defaultDateMode: 'today', // or history 时间面板
      }
    },
    computed: {
      hasDataToday() {
        return this.attributes_analytics_data.length
      },
      hasHistory() {
        let has_history = false
        this.records.forEach((item) => {
          if (item.skin_records && item.skin_records.length > 0) {
            has_history = true
          }
        })
        return has_history
      },
      getSex() {
        return this.sex
      },
      hasAttributeRecords() {
        return this.skin_attr_records && this.skin_attr_records.length > 0
      },
    },
    watch: {
      records() {
        this.init()
      },
    },
    created() {
      this.init()
    },
    mounted() {
      this.default_com_height = this.calculatedefaultComHeight()
    },
    updated() {
      if (!this.navigation_height) {
        this.navigation_height = this.calculateNavigationHeight()
      }
    },
    methods: {

      /**
       * 根据分析的值计算进度条颜色
       * @param {number} value {数值}
       * @return {Object}
       */
      calculateColorValue(value) {
        if (value <= 50) {
          return GRADIENT_COLOR.bad
        } else if (value > 50 && value <= 70) {
          return GRADIENT_COLOR.normal
        }
        return GRADIENT_COLOR.good
      },

      /**
       * 初始化默认的数据
       * @return {undefined}
       */
      init() {
        this.today = new Date()
        this.mockToday()
        this.attributes_analytics_data = this.findSkinAnalyticsDataGroup(this.today)// 雷达图
        this.current_skin_attr_analytics = this.attributes_analytics_data[0] || null // 某天皮肤属性单项的分析数据对象
        this.normalizeImageProblemProps(this.attributes_analytics_data)
        // 折线图
        this.skin_attr_records = this.findSkinAttrRecordsByKeyValue(this.records, this.nav_items_conf[0].key) // 默认第一个
        if (this.attributes_analytics_data.length === 0) { //
          this.defaultDateMode = 'history'
          this.is_today = false
        }
      },

      /**
       * 模拟今日日期
       * @return {undefined}
       */
      mockToday() {
        const query = parseQueryString()
        if ('today' in query) {
          this.today = query.today ? new Date(query.today) : new Date('2018-08-24')
        }
      },

      /**
       *  查找某一天最新的一组完整的测肤属性分析数据
       *  @param {String} date {当前时间}
       *  @return {array} analytics_data_group 雷达数据
       */
      findSkinAnalyticsDataGroup(date) {
        const skin_attr_records = this.findSkinAttrRecordsByKeyValue(this.records, this.nav_items_conf[0].key)
        const skin_attr_analytics_result = this.takeAnalyticsDataByDate(skin_attr_records, date)
        const analytics_data_group = []
        for (let i = 0; i < skin_attr_analytics_result.length; i += 1) {
          const analytics_group = this.findAnalyticsDataGroup(skin_attr_analytics_result[i].skin_record_id).filter(item => !!item)
          if (analytics_group.length === this.nav_items_conf.length) {
            Object.assign(analytics_data_group, analytics_group)
            break
          }
        }
        return analytics_data_group
      },

      /**
       *  通过皮肤部位的key值找到皮肤属性记录
       * @param {Array} records 后端返回的所有记录
       * @param {number} key 测肤类型(油 水 敏感度 色素 毛孔清洁度对应key值)
       * @return {Array} skin_attribute_record 皮肤的所有记录
       */
      findSkinAttrRecordsByKeyValue(records, key) {
        const [skin_attr_records] = records.filter(item => item && item.key === key)
        return skin_attr_records && Array.isArray(skin_attr_records.skin_records) ? skin_attr_records.skin_records : []
      },

      /**
       * 通过日期在当前皮肤属性中查找一条数据
       * @param {Array} skin_attr_records 部位测肤记录
       * @param {string|Date} date 日期
       * @return {Object} test_data
       */
      takeAnalyticsDataByDate(skin_attr_records, date) {
        return skin_attr_records.filter((item) => {
          if (! (item && item.created_at)) {
            return false;
          }

          if (date instanceof Date) {
            this.isSameDay(toDate(item.created_at), date)
          } else {
            return item.created_at === date;
          }
        }).reverse()
      },

      /**
       * 通过skin_record_id查找各部位的分析数据以数组形式返回
       * @param {Array} records  全部记录
       * @param {number} skin_record_id
       * @return {Array} analytics_data
       */
      findAnalyticsDataGroupById(records, skin_record_id) {
        return this.nav_items_conf.map((item) => {
          const attributes_records = this.findSkinAttrRecordsByKeyValue(records, item.key)
          const [analytics_data] = attributes_records.filter(record => record.skin_record_id === skin_record_id)
          return analytics_data
        })
      },

      /**
       *  判断日期是否相同
       * @param {Date} date_1
       * @param {Date} date_2
       * @param {Boolean} is_same
       */
      isSameDay(date_1, date_2) {
        if (date_1.getDate() !== date_2.getDate()) {
          return false
        } else if (date_1.getMonth() !== date_2.getMonth()) {
          return false
        } else if (date_1.getFullYear() !== date_2.getFullYear()) {
          return false
        }
        return true
      },

      /**
       *  判断时间字符是否相等
       * @param {string} d_1
       * @param {string} d_2
       * @return {Boolean}
       */
      isDateEqual(d_1, d_2) {
        return d_1 === d_2
      },

      /**
       *  处理测肤数据图表组件参数
       * @param {Object} data 某部位测肤数据
       * @return {Array}
       */
      normalizeSkinDataChartProps(data) {
        if (data) {
          const moisture = {
            value: `${Number(data.water).toFixed(1)}%`,
            name: this.$t('report.water'), // 水分
          }
          const oil = {
            value: `${Number(data.oil).toFixed(1)}%`,
            name: this.$t('report.oil'), // 油脂
          }
          const elastic = {
            value: data.flex,
            name: this.$t('report.elastic'), // 弹性
          }
          return [moisture, oil, elastic]
        }
        return []
      },

      /**
       *  折线图回调
       * @param {string} date
       * @return {undefined}
       */
      handleSelectDate(date) {
        if (date) {
          const {key} = this.nav_items_conf[this.current_skin_attr_index]
          const attr_records = this.findSkinAttrRecordsByKeyValue(this.records, key)
          const [analytics_data] = this.takeAnalyticsDataByDate(attr_records, date) // 选中时间对应的数据
          this.current_skin_attr_analytics = analytics_data // 重置当前数据
          this.attributes_analytics_data = this.findAnalyticsDataGroupById(this.records, analytics_data.skin_record_id)
          this.normalizeImageProblemProps(this.attributes_analytics_data)
        }
      },

      /**
       *  更新3D测肤问题配置
       *  @param {array} attributes_analytics_data {各部位的分析数据以数组形式返回}
       *  @return {undefined}
       */
      normalizeImageProblemProps(attributes_analytics_data) {
        // 油 水 敏感度 色素 毛孔清洁度
        const [
          oli_problem,
          moisture_problem,
          sensitivity_problem,
          pigment_problem,
          cleanliness_problem,
        ] = this.mapSkinProblemByAnalyticsData(attributes_analytics_data)
        image_problem_conf.forehead.contents = (oli_problem || moisture_problem) ? [oli_problem, moisture_problem] : [$t('report.none')]
        image_problem_conf.cheek.contents = (sensitivity_problem || pigment_problem) ? [sensitivity_problem, pigment_problem] : [$t('report.none')]
        image_problem_conf.nose.contents = cleanliness_problem ? [cleanliness_problem] : [$t('report.none')]
        this.image_problem_data = Object.assign({}, image_problem_conf)
      },

      /**
       * 通过分析结果映射得到皮肤属性对应的问题
       * @param {Array} 各个皮肤对应的数据
       * @retrun {Array} 皮肤分析数据得到的问题
       */
      mapSkinProblemByAnalyticsData(attributes_analytics_data) {
        return attributes_analytics_data.map(item => (item ? item.levelname : ''))
      },

      /**
       * 查找一组分析数据 顺序: oli, moisture, sensitivity, pigment, cleanliness
       * @param {item} skin_record_id
       * @return {Array}
       */
      findAnalyticsDataGroup(skin_record_id) {
        return this.nav_items_conf.map((item) => {
          const skin_attr_records = this.findSkinAttrRecordsByKeyValue(this.records, item.key)
          const [analytics_data] = skin_attr_records.filter(record => record.skin_record_id === skin_record_id)
          return analytics_data
        })
      },

      /**
       * 切换导航回调
       * @param {number} index {导航栏对应索引值}
       * @return {undefined}
       */
      handleNavChange(index) {
        this.resetSkinAttributeRecords(index)
      },

      /**
       *  重置皮肤属性的记录数据
       * @param {number} nav_index 导航配置数组的索引值
       * @return {undefined}
       */
      resetSkinAttributeRecords(nav_index) {
        const {key} = this.nav_items_conf[nav_index]
        this.current_skin_attr_index = nav_index
        if (this.is_today) {
          this.current_skin_attr_analytics = this.attributes_analytics_data[nav_index]
        } else {
          // 重置折线图表数据
          this.skin_attr_records = this.findSkinAttrRecordsByKeyValue(this.records, key)
          if (!Array.isArray(this.skin_attr_records) || this.skin_attr_records.length === 0) {
            this.normalizeImageProblemProps([]) // 如果这个皮肤属性没有记录 重置测肤问题组件
          }
        }
      },

      /**
       *  处理今天和历史面板切换回调
       * @param {Boolean} is_today
       * @return {void}
       */
      handleSwitchChange(is_today) {
        this.current_skin_attr_index = 0
        this.setNavigationIndex(this.current_skin_attr_index)
        this.is_today = is_today
        if (is_today) {
          this.attributes_analytics_data = this.findSkinAnalyticsDataGroup(this.today)// 雷达图
          this.current_skin_attr_analytics = this.attributes_analytics_data[0] || null // 某天某部位分析数据对象
          this.normalizeImageProblemProps(this.attributes_analytics_data)
        }
      },

      /**
       *  手动设置导航（重置导航栏位置）
       *  @param {number} value {0}
       *  @return {undefined}
       */
      setNavigationIndex(value) {
        const total = this.nav_items_conf.length
        this.current_skin_attr_index = (total + this.current_skin_attr_index + value) % total
        this.resetSkinAttributeRecords(this.current_skin_attr_index)
      },

      /**
       * 组装某天最新的分析数据
       * @param {Date} day
       * @return {Array} latest_data
       */
      assembleLatestAnalyticsDataOn(day) {
        return this.records
          .map((item) => {
            const latest = this.takeAnalyticsDataByDate(item.skin_records, day).reverse()
            return latest.shift()
          })
          .filter(item => Boolean(item))
      },

      /**
       * 生成方案
       * @param {array} attributes_analytics_data {各部位检查数据}
       * @param {Object} current_attribute_analytics {当前分析内容}
       * @return {undefined}
       */
      generateSolution(attributes_analytics_data, current_attribute_analytics) {
        this.is_loading = true
        const options = this.assembleLatestAnalyticsDataOn(current_attribute_analytics.created_at)
        this.generate({
          type: 'image',
          options,
          active_option: current_attribute_analytics,
        })
          .then((result) => {
            if (result) {
              this.$router.push({
                path: '/recommend',
                query: {type: 'image'},
              })
            }
            this.is_loading = false
          })
      },

      /**
       * 控制缺省页组件高度
       * @return {number} {description}
       */
      calculatedefaultComHeight() {
        const view_height = document.body.clientHeight
        const {height, top} = document.querySelector('.panel__header__tile').getBoundingClientRect()
        const padding_bottom = getComputedStyle('.image-report', 'padding-bottom')
        const dH = view_height - (height + top) - padding_bottom
        return dH
      },

      /**
       * 计算导航的高度
       * @return {number}
       */
      calculateNavigationHeight() {
        if (this.$refs['data-nav']) {
          const {height} = this.$refs['data-nav'].$el.getBoundingClientRect()
          return height
        }
        return 0
      },
    },
  }
</script>
